<template>
  <div>
    <h1>Father</h1>
    <p>Assets: {{ assets }}</p>
    <button @click="makeMoney(100)">Make Money</button>
    <button @click="spendMoney(50)">Spend Money</button>
    <Son :assets="assets" @update-assets="updateAssets" />
    <Daughter :assets="assets" @update-assets="updateAssets" />
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';

export default defineComponent({
  name: 'Father',
  props: {
    assets: {
      type: Number as PropType<number>,
      default: 0,
    },
  },
  emits: ['update-assets'],
  setup(props, { emit }) {
    const updateAssets = (newAssets: number) => {
      emit('update-assets', newAssets);
    };

    const makeMoney = (money: number) => {
      emit('update-assets', props.assets + money);
    };

    const spendMoney = (money: number) => {
      emit('update-assets', props.assets - money);
    };

    return {
      assets: props.assets,
      makeMoney,
      spendMoney,
      updateAssets,
    };
  },
});
</script>
